<!--  -->
<template>
  <div>
    <div class="type_dialog">
      <el-dialog :visible.sync="dialogVisible" width="500px" height="210px">
        <template slot="title">
          <div class="tishi">
            <span> {{ title }}</span>
          </div>
        </template>
        <div>
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item :label="titleA" style="margin-bottom: 10px">
              <div
                v-if="istype === 'num'"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  padding-left: 10px;
                "
              >
                <el-input-number
                  v-model="typetext"
                  controls-position="right"
                  :min="0.3"
                  :max="200"
                ></el-input-number>
                <span style="padding-left: 20px">元</span>
              </div>
              <el-input
                v-else-if="istype === 'password'"
                type="password"
                :placeholder="pletext"
                v-model="typetext"
                :maxlength="maxlength"
                show-password
              >
              </el-input>
              <el-input
                v-else
                type="text"
                :placeholder="pletext"
                v-model="typetext"
                :maxlength="maxlength"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <span
              v-if="istype === 'num'"
              style="
                font-size: 10px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #df5146;
                padding-left: 110px;
              "
              >*请输入0.3~200间的数额，支持小数。</span
            >
            <!-- <el-form-item label="所属">
              <el-select v-model="lib_id" placeholder="请选择">
                <el-option
                  v-for="item in library"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <slot></slot>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <button class="btn_add" @click="showType">确 定</button>
          <button @click="dialogVisible = false" class="can_btn">取 消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typetext: "",
      dialogVisible: false,
      istype: "", //操作类型
      title: "",
      titleA: "类型",
      pletext: "请输入内容",
      form: {},
      lib_id: "",
      library: [],
      maxlength: 12,
    };
  },
  props: {},
  activated() {},
  methods: {
    showdialog(title, type, name, titleA, pletext, maxlength) {
      this.title = "";
      this.dialogVisible = true;
      this.istype = type;
      this.title = title; //提示
      this.titleA = titleA; //labl
      this.pletext = pletext; //提示
      this.maxlength = maxlength ? maxlength : 12;
      if (this.istype == "chang") {
        this.typetext = name;
      } else {
        this.typetext = "";
      }
    },
    showdialog2() {
      this.dialogVisible = false;
    },
    showType() {
      if (this.typetext) {
        if (this.istype == "add") {
          this.$emit("showType", this.istype, this.typetext);
        } else if (this.istype == "chang") {
          this.$emit("showType", this.istype, this.typetext);
        } else if (this.istype === "num") {
          this.$emit("showType", this.istype, this.typetext);
        } else if (this.istype === "password") {
          this.$emit("showType", this.istype, this.typetext);
        }
      } else {
        this.$message.warning(this.pletext);
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "./style.scss";
.type_dialog {
  .el-dialog__header {
    border-bottom: 1px solid #f5f5f5;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
.dialog_title {
  width: 480px;
  margin: 0 auto;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: $textColorgreen;
  line-height: 48px;
}
.tishi {
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: $textColorgreen;
  border-left: 4px solid $themeColorponti;
  > span {
    margin-left: 6px;
  }
}
.dialog-footer {
  text-align: center;
}
.btn_add {
  width: 100px;
  height: 32px;
  background: $themeColorponti;
  border-radius: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  border: none;
  margin-right: 20px;
}
.can_btn {
  width: 100px;
  height: 32px;
  background: #ededed;
  border-radius: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  border: none;
}
</style>
<style lang="scss">
.type_dialog {
  .el-dialog__header {
    border-bottom: 1px solid #f5f5f5;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
